<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>手动构建FeatureLayer</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>
    <script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/Expand",
            "esri/geometry/Extent",
            "esri/request",
            "esri/layers/FeatureLayer",
            "esri/layers/support/Field",
            "esri/views/draw/Draw",
            "esri/Graphic",
            "esri/views/SceneView",
            "esri/geometry/Point",
            "esri/layers/GraphicsLayer",
            "esri/widgets/BasemapLayerList"
        ], function(
            esriConfig,
            Map,
            MapView,
            Expand,
            Extent,
            request,
            FeatureLayer,
            Field,
            Draw,
            Graphic,
            SceneView,
            Point,
            GraphicsLayer,
        BasemapLayerList
        )
        {
            try {
                var fields = [{
                    name: "ObjectID", alias: "ObjectID",
                    type: "oid"   //   每个要素必须的字段，字段值必须唯一，当做是整数类型。。。
                }, {
                    name: "title",
                    alias: "title",
                    type: "string"  //字符串类型

                }, {
                    name: "size",  //可以用来渲染符号大小
                    alias: "size",
                    type: "integer"  //整数类型

                }];     //除了上面的三种类型，还有 double、date。。。

                var graphics = [];
                var startx = 118;
                var starty = 38;
                var i = 1;  // 用于ObjectID属性

                // 每隔 0.05经度  0.05纬度创建一个点
                for (var x = startx; x < 120; x += 0.05) {
                    for (var y = starty; y < 40; y += 0.05) {  //一共创建1600个点
                        graphics.push({
                            geometry: new Point({
                                x: x,
                                y: y,  //没指定坐标系，默认是WGS84坐标系
                                z: x + y * 10

                            }),
                            attributes: {
                                ObjectID: i,
                                title: "title",
                                size: parseInt(Math.random() * 5000 + 5000),
                            },
                        });
                        i++;
                    }

                }



                var renderer = {
                    type: "simple", // 简单渲染器  new SimpleRenderer()
                    symbol: {
                        type: "point-3d", // 符号类型  new PointSymbol3D()
                        symbolLayers: [{
                            type: "object",  // “符号子类型”  new ObjectSymbol3DLayer()
                            //几何体样式 sphere（球） cylinder（圆柱） cube（立方块） cone（圆锥） inverted-cone（倒圆锥） diamond（钻石） tetrahedron（四面体）
                            resource: {primitive: "sphere"},
                            material: {color: "blue"}
                        }]
                    },
                    visualVariables: [{    //视觉变量
                        type: "size",
                        field: "size",
                        valueUnit: "feet" // 指定渲染字段的单位，还有meter。。。
                    }]
                };

                var featureLayer = new FeatureLayer({
                    source: graphics,
                    fields: fields,
                    renderer: renderer
                });
                var graphicsLayer = new GraphicsLayer();
                var map = new Map({
                    basemap: "satellite",
                    ground: "world-elevation",
                    layers: [featureLayer]
                });

                /****************************
                 * Add a 3D polyline graphic
                 ****************************/


               map.add(graphicsLayer);

                var symbol3d = {
                    type: "line-3d",  // autocasts as new LineSymbol3D()
                    color: [226, 119, 40],
                    width: 14
                   // symbolLayers: [{
                   ////     type: "path",  // autocasts as new PathSymbol3DLayer()
                     //   profile: "circle",
                      //  width: 10,    // width of the tube in meters
                      //  material: { color: [ 128,128,128 ] }
                  //  }]
                };

                var polyline = {
                    type: "polyline", // autocasts as new Polyline()
                    paths: [
                        [118.5, 39.48791, 0],
                        [118.5, 39.48791, 2000],
                        [118.5, 39.48791, 10000]
                    ]
                };

               lineSymbol ={
                  type: "simple-line", // autocasts as SimpleLineSymbol()
                  color: [226, 119, 40],
                 width: 14
             };

                var polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: lineSymbol
                });

                graphicsLayer.add(polylineGraphic);

                polyline = {
                    type: "polyline", // autocasts as new Polyline()
                    paths: [
                        [119.5, 39.48791, 0],
                        [119.5, 39.48791, 2000],
                        [119.5, 39.48791, 60000]
                    ]
                };
                polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: lineSymbol
                });

                graphicsLayer.add(polylineGraphic);
                var polygon = {
                    type: "polygon", // autocasts as new Polygon()
                    rings: [
                        [119, 39, 1400],
                        [119, 38.5, 1500],
                        [120, 38.5, 1500],
                        [120, 39, 12400],
                        [119, 39, 12400]
                    ]
                };

                var fillSymbol = {
                    type: "simple-fill", // autocasts as new SimpleFillSymbol()
                    color: [227, 139, 79, 0.8],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                };

                var polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: fillSymbol
                });

            //    graphicsLayer.add(polygonGraphic);

                var initCam = {
                    position: {
                        x: 119,
                        y: 37,
                        z: 332780,
                        spatialReference: {
                            wkid: 4326
                        }
                    },
                    heading: 358.8,
                    tilt: 30
                };

                var view = new SceneView({
                    map: map,
                    container: "viewDiv",
                    camera: initCam,
                    popup: {
                        defaultPopupTemplateEnabled: true
                    },

                });



                var basemapLayerList = new BasemapLayerList({
                   view: view
               });
// Adds the widget below other elements in the top left corner of the view
              view.ui.add(basemapLayerList, {
                   position: "top-right"
              });


                view.on("click", function(evt) {
                    try {

                        var mp = evt.mapPoint;
                        var sr = mp.spatialReference;
                        //   alert(JSON.stringify(view.coordinates));

                        var point = new Point({
                            // hasZ: false,
                            //hasM: false,
                            x: 119.5,
                            y: 38.9,
                            z: 2000,
                            width: 30,
                            spatialReference: view.spatialReference
                        });


                        var graphic = new Graphic({
                            geometry: point,
                            symbol: {
                                type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                                style: "square",
                                color: "blue",
                                size: "8px",  // pixels
                                outline: {  // autocasts as new SimpleLineSymbol()
                                    color: [255, 255, 0],
                                    width: 3  // points
                                }
                            }
                        });
                        /*    var point = new Point({
                        hasZ: true,
                        hasM: false,
                        x: mp.x,
                        y: mp.y,
                        z:3000,
                        size:20,
                        spatialReference: sr
                    });*/

                        //  alert(JSON.stringify(evt));
                        //  graphics.add(point);

                       // graphicsLayer.add(graphic);

                    graphicsLayer.graphics.removeAll();

                        graphicsLayer.graphics.add(graphic);
                      //  view.update();
                    }
                    catch (e) {
                        alert(e);
                    }
                });

                var extent = new Extent({
                    spatialReference: { wkid: 14326 },
                    xmax: 120,
                    xmin: 118,
                    ymax: 40,
                    ymin: 28
                });
                view.goTo(extent);



            }
            catch (e) {
                alert(e);
            }
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>

</html>
